<template>
  <!-- 筛选区 -->
  <div
    class="sub-filter"
    v-if="filterData && !filterLoading"
  >
    <!-- 品牌 -->
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a
          @click="filterData.selectedBrand=item.id"
          :class="{active:filterData.selectedBrand===item.id}"
          href="javascript:;"
          v-for="item in filterData.brands"
          :key="item.id"
        >{{item.name}}</a>
      </div>
    </div>
    <!--  -->
    <div
      class="item"
      v-for="p in filterData.saleProperties"
      :key="p.id"
    >
      <div class="head">{{p.name}}</div>
      <div class="body">
        <a
          @click="p.selectedAttr=attr.id"
          :class="{active:p.selectedAttr===attr.id}"
          href="javascript:;"
          v-for="attr in p.properties"
          :key="attr.id"
        >{{attr.name}}</a>
      </div>
    </div>
  </div>
  <div
    v-else
    class="sub-filter"
  >
    <XtxSkeleton
      class="item"
      width="800px"
      height="39px"
    />
    <XtxSkeleton
      class="item"
      width="800px"
      height="39px"
    />
    <XtxSkeleton
      class="item"
      width="600px"
      height="39px"
    />
    <XtxSkeleton
      class="item"
      width="600px"
      height="39px"
    />
    <XtxSkeleton
      class="item"
      width="600px"
      height="39px"
    />
  </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    // 1. 获取数据
    // 2. 数据中需要全部选中，需要预览将来点击激活功能。默认选中全部
    // 3. 完成渲染
    // 4. 分类发生变化的时候需要重新获取筛选数据，需要使用侦听器
    const route = useRoute()
    const filterData = ref(null)
    const filterLoading = ref(false)
    watch(() => route.params.id, (newVal, oldVal) => {
      if (route.path === ('/category/sub/' + newVal)) {
        filterLoading.value = true
        newVal && findSubCategoryFilter(route.params.id).then(({ result }) => {
          // 品牌全部
          result.selectedBrand = undefined
          result.brands.unshift({ id: undefined, name: '全部' })
          // 销售属性全部
          result.saleProperties.forEach(p => {
            p.selectedAttr = undefined
            p.properties.unshift({ id: undefined, name: '全部' })
          })
          filterData.value = result
          filterLoading.value = false
        })
      }
    }, { immediate: true })
    // 组织好筛选参数 {brandId,attrs:[{groupName:'',groupName:''}]}
    watch(filterData, (oldVal) => {
      // 传给父组件
      if (oldVal === null) return
      const filterParams = { attrs: [] }
      filterParams.brandId = filterData.value.selectedBrand
      filterData.value.saleProperties.forEach(p => {
        const attr = p.properties.find(attr => attr.id === p.selectedAttr)
        if (attr && attr.id !== undefined) {
          filterParams.attrs.push({ groupName: p.name, propertyName: attr.name })
        }
      })
      emit('change', filterParams)
    }, { deep: true })
    return { filterData, filterLoading }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
